<template>
	<header class="fixed">
		<div class="header">
			<div>
				<span v-show="backway" @click="back()">返回</span>
			</div>
			<span @click="headClick()">{{title}}</span>
			<div>
				<span v-show="focusShow" @click="updateFocus()">
					<span v-show="focused">已关注</span>
					<span v-else>关注</span>
				</span>
				<span v-show="favoriteShow" @click='updateFavorite()'>
					<span v-show="favorited">已收藏</span>
					<span v-else>收藏</span>
				</span>
			</div>
		</div>
		<div v-show="listShow">
			<ul>
				<li v-for="item in listInfo" :value="$key" @click="listClick($event)">{{item}}</li>
			</ul>
		</div>
	</header>
</template>
<script>
	import {backPath} from './../js/functions'
	import {updateTitle, updateFocusSelect, updateBook} from './../vuex/action'

	export default {
		vuex: {
			getters: {
				// 获取store中的title
				title: function (state) {
					return state.title
				},
				// 获取sotre中的 backshow 如果没有值则返回false
				backShow: function (state) {
					if (state.head && state.head.backShow) {
						return state.head.backShow
					} else {
						return false
					}
				},
				favorite: state => state.book.favorite,
				focus: state => state.book.focus
			},
			actions: {
				updateTitle,
				updateFocusSelect,
				updateBook
			}
		},
		computed: {
			showHeadList: function () {
				if (this.$route.path === '/focus') return true
				return false
			},
			backway: function () {
				// if (this.$route.backway) return this.$route.backway
				if ('/focus/user/write'.indexOf(this.$route.path) > -1) return false
				return true
			},
			// 判断是否显示关注按钮
			focusShow: function () {
				if (this.$route.path.indexOf('/articles/') > -1) return true
				return false
			},
			// 判断是否已关注
			focused: function () {
				if (this.focusShow) {
					if (this.focus.indexOf(this.$route.path.split('/')[2]) > -1) return true
				}
				return false
			},
			// 判断是否显示收藏按钮
			favoriteShow: function () {
				if (this.$route.path.indexOf('/bookinfo/') > -1) return true
				return false
			},
			// 判断是否已收藏
			favorited: function () {
				if (this.favoriteShow) {
					if (this.favorite.indexOf(this.$route.path.split('/')[2]) > -1) return true
				}
				return false
			},
			listInfo: function () {
				let data = {
					science: '科幻',
					whodunit: '推理',
					workspace: '职场',
					love: '爱情',
					Supernatural: '灵异',
					literature: '文学'
				}

				for (let p in data) {
					if (this.focus.indexOf(p) === -1) delete data[p]
				}
				return data
			}
		},
		watch: {
			// 更新title
			'$route.title': function (val) {
				if (val) this.updateTitle(val)
			},
			'$route': function () {
				if (this.listShow) this.listShow = false
			}
		},
		// route: {
		// 	activate: function () {
		// 		console.log(456)
		// 	},
		// 	deactivate: function () {
		// 		console.log(123)
		// 	}
		// },
		methods: {
			// 返回路由对应的上一级
			goBack: function () {
				// 获取当前路由的path
				// let name = this.$route.name
				let path = this.$route.path
				if (backPath(path)) {
					this.$router.go(backPath(path))
				}
			},
			headClick: function () {
				if (this.showHeadList) this.listShow = !this.listShow
			},
			listClick: function (event) {
				let value = event.target.getAttribute('value')
				if (this.listInfo[value]) {
					this.updateTitle(this.listInfo[value])
					this.listShow = false
					this.updateFocusSelect(value)
				}
			},
			back: function () {
				window.history.go(-1)
			},
			updateFavorite: function () {
				this.updateBook('favorite', this.$route.path.split('/')[2])
			},
			updateFocus: function () {
				this.updateBook('focus', this.$route.path.split('/')[2])
			}
		},
		data: function () {
			return {
				listShow: false,
				// listInfo: {
				// 	science: '科幻',
				// 	whodunit: '推理',
				// 	workspace: '职场',
				// 	love: '爱情',
				// 	Supernatural: '灵异',
				// 	literature: '文学'
				// },
				backPath: '',
				history: []
			}
		},
		ready: function () {
			let route = this.$route
			if (route.title) this.updateTitle(route.title)
		}
	}
</script>
<style scoped>
	.header{
		box-align: center;
		align-items: center;
		background-color: #26a2ff;
		box-sizing: border-box;
		color: #FFF;
		display: flex;
		font-size: 1.7rem;
		height: 40px;
		white-space: nowrap;
		text-align: center;
	}
	.fixed {
		top: 0;
		right: 0;
		left: 0;
		position: fixed;
		z-index: 1;
	}
	span {
		flex: 1;
	}
	.header>div{
		width: 62px;
	}
	.header>div>span{
		font-size: 1.5rem;
	}
	ul {
		list-style: none;
		padding: 0;
		/*background-color: #FFF;*/
	}
	li {
		height: 40px;
		line-height: 40px;
		background-color: #FFF;
		border-bottom: 1px solid #ccc;
		padding: 0 0 0 20px;
	}
</style>
